<template>
  <div class="operation">
    <!-- 头部输入框 -->
    <div class="top">
      工单编号：<el-input v-model.trim="workOrder " placeholder="请输入" class="work-order" />
      工单状态：  <el-select slot="prepend" v-model.trim="select" placeholder="请选择">
        <el-option v-for="(item,inde) in values" :key="inde" :label="item.statusName" :value="item.statusName" />
      </el-select>
      <el-button type="primary" icon="el-icon-search" style="margin-left:10px;" @click="onSearch">搜索</el-button>
    </div>
    <!-- /头部输入框 -->
    <!-- 主体表单内容 -->
    <div class="list">
      <!-- 按钮 -->
      <div class="btn">
        <el-button type="primary" icon="el-icon-circle-plus-outline" class="newly-build">新建</el-button>
        <el-button disabled class="default">工单配置</el-button>
      </div>
      <!-- 表单 -->
      <el-table
        :key="index"
        v-loading="loading"
        :data="OperationCount"
        style="width: 100%"
        type="index"
        empty-text="暂时没有相关数据~"
      >
        <el-table-column
          label="序号"
          width="80"
          type="index"
          :index="indexMethod"
        />
        <el-table-column
          prop="taskCode"
          label="工单编号"
          width="160"
        />
        <el-table-column
          prop="innerCode"
          label="设备编号"
          width="160"
        />
        <el-table-column
          prop="taskType.typeName"
          label="工单类型"
          width="160"
        />
        <el-table-column
          prop="createType"
          label="工单方式"
          width="160"
        />
        <el-table-column
          prop="taskStatusTypeEntity.statusName"
          label="工单状态"
          width="160"
        />
        <el-table-column
          prop="userName"
          label="运营人员"
          width="160"
        />
        <el-table-column
          prop="updateTime"
          label="创建日期"
          width="160"
        />
        <el-table-column label="操作">
          <span style="color:#5f84ff">查看详情</span>
        </el-table-column>
      </el-table>
      <!-- 底部文字 -->
      <div class="footer-text" style="height:100px">
        <div class="left">共{{ totalCount }}条记录  第{{ pageIndex }} /{{ totalPage }} 页</div>
        <div class="right">
          <el-button :disabled="pageIndex===1?true:false" @click="onClickBefore">上一页</el-button>
          <el-button @click="onClickNext">下一页</el-button>
        </div>
      </div>
    </div>
    <!-- /主体表单内容 -->
  </div>
</template>

<script>
import { getWorkOrderApi, getAllTaskStatusApi } from '@/api/work_order'
export default {
  name: 'Operation',
  components: {},
  props: {},
  data() {
    return {
      workOrder: '',
      select: '',
      tableData: [],
      pageIndex: 1,
      OperationCount: [],
      totalCount: null,
      totalPage: null,
      index: 1,
      values: [],
      loading: false
    }
  },
  computed: {
  },
  watch: {},
  created() {
    this.getWorkOrderFn()
    this.getAllTaskStatusFn()
  },
  methods: {
    indexMethod() {
      return this.index * 1
    },
    async getWorkOrderFn() {
      try {
        this.loading = true
        const { data } = await getWorkOrderApi({
          pageSize: 10,
          isRepair: false,
          pageIndex: this.pageIndex
        })
        // console.log(data)
        // console.log(data.currentPageRecords)

        data.currentPageRecords.forEach(item => { // 清除为空的脏数据，否则渲染表格会报错
          if (!(JSON.stringify(item) === '{}')) {
            this.OperationCount.push(item)
          }
        })
        this.totalCount = data.totalCount
        this.totalPage = data.totalPage
      } finally {
        this.loading = false
      }
    },
    // 获取工单状态列表
    async getAllTaskStatusFn() {
      try {
        const { data } = await getAllTaskStatusApi()
        // console.log(data)
        this.values = data
      } catch (err) {
        console.log(err)
      }
    },
    onClickNext() {
      this.pageIndex++
      this.getWorkOrderFn()
    },
    onClickBefore() {
      this.pageIndex--
      this.getWorkOrderFn()
    },
    async onSearch() {
      if (this.workOrder.length === 0 && this.select.length === 0) this.$message('输入框内容不能为空')
      const queryObj = {
        pageIndex: this.pageIndex,
        pageSize: 10,
        isRepair: false
      }
      if (this.workOrder) queryObj.taskCode = this.workOrder
      if (this.select) {
        if (this.select === '待办') {
          queryObj.status = 1
        } else if (this.select === '进行') {
          queryObj.status = 2
        } else if (this.select === '取消') {
          queryObj.status = 3
        } else if (this.select === '完成') {
          queryObj.status = 4
        }
      }
      try {
        this.loading = true
        const { data } = await getWorkOrderApi(queryObj)
        console.log(data)
        this.OperationCount = []
        data.currentPageRecords.forEach(item => { // 清除为空的脏数据，否则渲染表格会报错
          if (!(JSON.stringify(item) === '{}')) {
            this.OperationCount.push(item)
          }
        })
      } catch (err) {
        console.log(err)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>
<style lang='scss'>
.el-table td, .el-table th.is-leaf{
   border-bottom: none;
}
</style>
<style scoped lang='scss'>
.work-order{
 width: 205px;
 height: 36px;
}
.top{
  background-color: #fff;
  margin: 10px 17px 20px 7px;
  padding: 0 10px 0 13px;
  height: 64px;
  line-height: 64px;
}
.list{
  margin: 10px 17px 20px 7px;
  padding: 18px 10px 0 13px;
  background-color: #fff;
  .btn{
    margin-bottom: 18px;
    .newly-build{
    align-items: center;
    width: 80px!important;
    height: 36px;
    padding: 0;
    background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
    border: none;
  }
  .default{
    align-items: center;
    width: 80px!important;
    height: 36px;
    padding: 0;
    background-color: #fbf4f0!important;
    border: none;
    color: #655b56!important;
  }
  }
  .footer-text{
    margin-top: 20px;
    .left{
    float: left;
    height: 40px;
    line-height: 40px;
    font-size: 16px!important;
    color: #dbdfe5!important;
    }
    .right{
      float: right;
      .el-button{
        background-color:#d5ddf8;
      }
    }
  }
}

</style>
